package showcase

import "github.com/templui/templui/internal/components/inputotp"

templ InputOTPCustomStyling() {
	@inputotp.InputOTP(inputotp.Props{
		ID: "otp-styled",
	}) {
		@inputotp.Group(inputotp.GroupProps{
			Class: "gap-3",
		}) {
			@inputotp.Slot(inputotp.SlotProps{
				Index: 0,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 1,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 2,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Separator(inputotp.SeparatorProps{
				Class: "text-2xl font-bold text-primary",
			}) {
				<span>:</span>
			}
			@inputotp.Slot(inputotp.SlotProps{
				Index: 3,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 4,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 5,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
		}
	}
}
